<script setup lang="ts">
import { Mode, useModeStore } from '@/composables'
import type { ComputedRef } from 'vue'
import { computed, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps<{ customMode: number | undefined }>()
interface MenuItem {
  title: string
  modeValue: number
  event?: () => void
}

const mode = useModeStore()

const menuItems: ComputedRef<MenuItem[]> = computed(() => [
  {
    title: t('shou-dong'),
    modeValue: 196608,
    event: () => mode.setMode(Mode.MANUAL)
  },
  {
    title: t('zi-zhu'),
    modeValue: 262144,
    event: () => mode.setMode(Mode.AUTO)
  },
  {
    title: t('ting-zhi'),
    modeValue: 0,
    event: () => mode.setMode(Mode.STOP)
  }
])
watch(
  () => props.customMode,
  (val) => {
    radio.value = val
  }
)

const radio = ref<number | undefined>()
</script>

<template>
  <el-card class="flex-grow-0" shadow="always" header="车辆模式" style="--el-card-padding: 0">
    <div class="px-1">
      <el-radio-group v-model="radio" class="flex justify-center items-center w-full h-auto">
        <el-radio
          class="w-auto inline-flex"
          v-for="item in menuItems"
          :key="item.modeValue"
          :label="item.title"
          :value="item.modeValue"
          @change="item.event"
        >
          {{ item.title }}
        </el-radio>
      </el-radio-group>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
:deep(.el-card__header) {
  padding: 0 0 0 10px;
  font-size: small;
  // border-bottom: none;
}
</style>
